<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>个性地图</title>
		<style type="text/css">
			html {
				height: 100%
			}

			body {
				height: 100%;
				margin: 0px;
				padding: 0px
			}

			#container {
				height: 100%
			}

			ul li {
				list-style: none;
			}

			.btn-wrap {
				z-index: 999;
				position: fixed;
				bottom: 10px;
				right: 20px;
				padding: 10px;
				border-radius: 10px;
				background-color: transparent;
				box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
			}

			.btn {
				width: 75px;
				height: 30px;
				float: left;
				background-color: #447aff;
				color: #ffffff;
				font-size: 14px;
				border: 1px solid #447aff;
				border-radius: 5px;
				margin: 0 5px;
				text-align: center;
				line-height: 30px;
			}

			.btn:active {
				background-color: rgba(102, 177, 255, 1);
				color: #fff;
			}
		</style>
	</head>
	<body>
		<div id='container'></div>
		<ul class="btn-wrap" style="z-index: 99;">
			<li class="btn" id="transferCoord">确 定</li>
		</ul>
	</body>
	<!-- 微信 JS-SDK 如果不需要兼容小程序，则无需引用此 JS 文件 -->
	<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

	<!-- uni 的 SDK -->
	<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>

	<!-- 百度地图 -->

	<script type="text/javascript"
		src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=Af6FfpOOZrHT1Ff2enuUKMZgjz4NfQ3W"></script>

	<!-- 引入地图数据文件 -->
	<script type="text/javascript" src="./ybyData/ybyBuilding.json"></script>
	<script type="text/javascript" src="./ybyData/ybyDaoLu.json"></script>
	<script type="text/javascript" src="./ybyData/ybyDaoLuB.json"></script>
	<script type="text/javascript" src="./ybyData/ybyShuiXi.json"></script>
	<script type="text/javascript" src="./ybyData/ybyXiaoLu.json"></script>

	<script type="text/javascript">
		document.addEventListener('UniAppJSBridgeReady', function() {
			// 配置百度地图
			var map = new BMapGL.Map("container"); // 创建地图实例
			var point = new BMapGL.Point(116.875398, 38.342222); // 创建点坐标
			// 设置地图最大最小缩放级别
			map.setMinZoom(15)
			map.setMaxZoom(17)
			// 设置地图类型(1.标准地图：BMAP_NORMAL_MAP 2.地球模式：BMAP_EARTH_MAP 3.普通卫星地图：BMAP_SATELLITE_MAP)
			// map.setMapType(BMAP_NORMAL_MAP);
			// 地图个性化配置
			map.setMapStyleV2({
				styleId: '1115a5e0cfc2cdd844e5b788ce5ea3af'
			});
			var opts = {
				offset: new BMapGL.Size(10, 40)
			}
			var scaleCtrl = new BMapGL.ScaleControl(opts); // 添加比例尺控件
			map.addControl(scaleCtrl);

			// 自定义图层
			// 建筑
			ybyBuilding.map(item => {
				let polyline = []
				item.map(el => {
					polyline.push(new BMapGL.Point(el[0], el[1]))
				})
				let polygon = new BMapGL.Polygon(polyline, { // 个性化配置
					strokeColor: "rgb(9, 18, 32)",
					strokeWeight: 2,
					strokeOpacity: 0.5,
					fillOpacity: 1,
					fillColor: "rgb(112,128,144)"
				})
				map.addOverlay(polygon)
			})
			// 道路
			ybyDaoLu.map(item => {
				let polyline = []
				item.map(el => {
					polyline.push(new BMapGL.Point(el[0], el[1]))
				})
				let polygon = new BMapGL.Polygon(polyline, { // 个性化配置
					strokeColor: "rgb(47,79,79)",
					strokeWeight: 2,
					strokeOpacity: 0.5,
					fillOpacity: 1,
					fillColor: "rgb(112, 128, 144)"
				})
				map.addOverlay(polygon)
			})
			// 道路2
			ybyDaoLuB.map(item => {
				let polyline = []
				item.map(el => {
					polyline.push(new BMapGL.Point(el[0], el[1]))
				})
				let polygon = new BMapGL.Polygon(polyline, { // 个性化配置
					strokeColor: "rgb(47,79,79)",
					strokeWeight: 2,
					strokeOpacity: 0.5,
					fillOpacity: 1,
					fillColor: "rgb(112, 128, 144)"
				})
				map.addOverlay(polygon)
			})
			// 小路
			ybyXiaoLu.map(item => {
				let polyline = []
				item.map(el => {
					polyline.push(new BMapGL.Point(el[0], el[1]))
				})
				let polygon = new BMapGL.Polygon(polyline, { // 个性化配置
					strokeColor: "rgb(47,79,79)",
					strokeWeight: 2,
					strokeOpacity: 0.5,
					fillOpacity: 1,
					fillColor: "rgb(112, 128, 144)"
				})
				map.addOverlay(polygon)
			})
			// 水系
			ybyShuiXi.map(item => {
				let polyline = []
				item.map(el => {
					polyline.push(new BMapGL.Point(el[0], el[1]))
				})
				let polygon = new BMapGL.Polygon(polyline, { // 个性化配置
					strokeColor: "rgb(9,18,32)",
					strokeWeight: 2,
					strokeOpacity: 0.5,
					fillOpacity: 1,
					fillColor: "rgb(65, 137, 185)"
				})
				map.addOverlay(polygon)
			})

			// var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
			// map.addControl(zoomCtrl);
			// var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
			// map.addControl(cityCtrl);
			map.centerAndZoom(point, 16); // 初始化地图，设置中心点坐标和地图级别
			map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
			// map.setHeading(0);   // 设置地图旋转角度
			// map.setTilt(50);   // 设置地图的倾斜角度

			// 添加默认图标
			function addIcon(lng, lat) {
				var point = new BMapGL.Point(lng, lat);
				var marker = new BMapGL.Marker(point); // 创建标注   
				map.addOverlay(marker); // 将标注添加到地图中
			}

			var chooseLng = ''
			var chooseLat = ''
			// 添加自定义图标
			function addCustomIcon(lng, lat) {
				var point = new BMapGL.Point(lng, lat);
				var myIcon = new BMapGL.Icon("./images/marker.png", new BMapGL.Size(40, 40), {
					// 指定定位位置
					anchor: new BMapGL.Size(18, 30),
				});
				// 创建标注对象并添加到地图  
				var marker = new BMapGL.Marker(point, {
					icon: myIcon,
					enableDragging: true,
					overlayType: 'iconMarker' // 自定义属性，用于特定删除
				});
				map.addOverlay(marker);
				chooseLng = lng.toFixed(6)
				chooseLat = lat.toFixed(6)
				// console.log(fixLng, fixLat)
			}

			// 清除所有覆盖物
			function removeOverlay() {
				map.clearOverlays();
			}

			// 清除自定义属性icon覆盖物
			function removeIconOverlay() {
				var allOverlay = map.getOverlays();
				for (var i = 0; i < allOverlay.length; i++) {
					if (allOverlay[i]._config.overlayType && allOverlay[i]._config.overlayType == "iconMarker") {
						map.removeOverlay(allOverlay[i])
					}
				}
				chooseLng = ''
				chooseLat = ''
			}

			map.addEventListener('click', function(e) {
				// removeOverlay()
				removeIconOverlay()
				var clickLng = e.latlng.lng
				var clickLat = e.latlng.lat
				// addIcon(clickLng, clickLat)
				addCustomIcon(clickLng, clickLat)
			});

			document.getElementById('transferCoord').addEventListener('click', function(e) {
				if (chooseLng == '' || chooseLat == '') {
					alert('请先点击地图选择告警位置')
				} else {
					uni.postMessage({
						data: {
							lng: chooseLng,
							lat: chooseLat
						}
					});
				}
			});

			// 获取 url 中的参数
			function getQuery(name) {
				// 正则：[找寻'&' + 'url参数名字' = '值' + '&']（'&'可以不存在）
				let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
				let r = window.location.search.substr(1).match(reg);
				if (r != null) {
					// 对参数值进行解码
					return decodeURIComponent(r[2]);
				}
				return null;
			}
			// url: 'http://xxx.com?point=113.1234,38.5625'
			// var urlParamPoint = getQuery('point');
			// console.log(urlParamPoint)   // '113.1234,38.5625'

		});
	</script>
</html>
